<template>
  <div class="paycallback">
    <div class="paycallback__status">
      <img src="@image/pay-success.png"
           v-show="status === '0'">
      <img src="@image/pay-fail.png"
           v-show="status === '1'">
      <img src="@image/pay-fail.png"
           v-show="status === '2'">
      <span>{{statusstr}}</span>
    </div>
    <div class="btns">
      <div class="left-btn btn"
           @click="leftBtnFunc">{{leftText}}</div>
      <div class="right-btn btn"
           @click="rightBtnFunc">{{rightText}}</div>
    </div>
    <div class="paycallback__paybutton">
      <span>温馨提示：姿肽美不会以订单异常、系统升级为由，要求您点击 任何链接进行退款操作，请谨慎！</span>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins'
export default {
  data () {
    return {
      leftText: '',
      rightText: '',
      leftBtnFunc: function () {},
      rightBtnFunc: function () {},

      statusstr: '',
      status: '0',
      payid: '',
      orderid: ''
    }
  },
  mixins: [mixins],
  mounted () {
    this.BIND_LOADING(false)
    //    status 0,支付成功 1,支付失败, 2支付取消
    this.initStatus()
    this.initBtns()
    this.payid = this.$route.query.payid
    this.orderid = this.$route.query.orderid || this.$route.query.attachedData
    if (this.status === '0') {
      this.statusstr = '您已支付成功!'
      this.requesNetToGoods(this.payid)
    } else if (this.status === '1') {
      this.statusstr = '支付失败!'
    } else if (this.status === '2') {
      this.statusstr = '支付取消!'
    } else {
      this.status = '0'
      this.statusstr = '您已支付成功!'
      this.requesNetToGoods(this.payid)
    }
  },
  methods: {
    initStatus () {
      let status = this.$route.query.status || ''
      switch (status) {
        // 取消支付
        case 'WAIT_BUYER_PAY':
          this.status = '2'
          return
        // 支付成功
        case 'TRADE_SUCCESS':
          this.status = '0'
          return
        // 支付失败
        case 'TRADE_CLOSED':
          this.status = '0'
      }
    },
    initBtns () {
      let self = this
      switch (this.status - '0') {
        case 0:
          this.leftText = '查看订单'
          this.leftBtnFunc = function () {
            self.goAddress('order-details', {orderid: self.orderid})
          }
          this.rightText = '继续逛逛'
          this.rightBtnFunc = function () {
            self.goAddress('home', {})
          }
          break
        case 1:
        case 2:
          this.leftText = '返回订单'
          this.leftBtnFunc = function () {
            self.goAddress('my-order', {})
          }
          this.rightText = '重新支付'
          this.rightBtnFunc = function () {
            // self.goAddress('home', {})
            self.goAddress('my-order', {})
          }
          break
      }
    },
    goAddress (name, query) {
      this.$router.push({name: name, query: query})
    },
    requesNetToGoods: function (payid) {
    },
    requesNet (payid) {
    }
  }
}
</script>


<style lang="stylus" scoped>
.paycallback {
  .paycallback__status {
    width: 100%;
    height: 215px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fef3e1;

    img {
      width: 50px;
      height: 50px;
      /* position: absolute; */
      top: 50px;
    }

    span {
      margin-top: 20px;
      font-size: 40px;
      color: #d39f47;
      font-family: PingFangSC-Semibold;
    }
  }

  .btns {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 51px;
    margin-bottom: 20px;

    .btn {
      width: 150px;
      height: 60px;
      border-radius: 4px;
      border: 1px solid;
      font-size: 28px;
      color: rgba(102, 102, 102, 1);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .left-btn {
      margin-right: 50px;
    }

    .right-btn {
    }
  }

  .paycallback__paybutton {
    width: 100%;
    /* height: 160px; */
    display: flex;
    align-items: center;
    font-size: 24px;

    span {
      color: #92969c;
      font-family: PingFangSC-Regular;
      margin-top: 30px;
      margin-left: 27px;
      margin-right: 27px;
    }
  }

  .paycallback__backorder {
    width: 150px;
    height: 60px;
    background-color: white;
    border: 1px white solid;
  }
}
</style>

